<html>
  <head>
    <title>Message Paths</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <div id="frame">
      <svg
        version="1.1"
        id="Layer_1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px"
        y="0px"
        viewBox="0 0 1000 400"
        style="enable-background: new 0 0 1000 400"
        xml:space="preserve"
      >
        <style type="text/css">
          .st0 {
            fill: none;
            stroke: #000000;
            stroke-width: 2.0381;
            stroke-miterlimit: 10;
          }
          .st1 {
            fill: none;
            stroke: #000000;
            stroke-width: 2;
            stroke-miterlimit: 10;
          }
          .st2 {
            fill: none;
            stroke: #000000;
            stroke-width: 2;
            stroke-miterlimit: 10;
            stroke-dasharray: 6, 2;
          }
          .st3 {
            fill: #22b573;
          }
          .st4 {
            fill: #ffffff;
          }
          .st5 {
            fill: #f7931e;
          }
          .st6 {
            fill: #0071bc;
          }
          .st7 {
            fill: #f462a7;
          }
          .st8 {
            fill: #ffffff;
            stroke: #000000;
            stroke-width: 4;
            stroke-miterlimit: 10;
          }
          .st9 {
            fill: none;
            stroke: #000000;
            stroke-width: 3;
            stroke-miterlimit: 10;
          }
          .st10 {
            fill: #39b54a;
            stroke: #000000;
            stroke-width: 2;
            stroke-miterlimit: 10;
          }
          .st11 {
            fill: none;
            stroke: #ffffff;
            stroke-width: 2.6713;
            stroke-miterlimit: 10;
          }
        </style>
        <g>
          <path
            d="M775.6,376.3v-11.3l2.8-2.8h8.2l2.7,2.7v2.6H786v-1.4l-1.1-1.1H780l-1.2,1.2v8.8l1.2,1.2h4.8l1.1-1.1v-1.4h3.3v2.6
       l-2.7,2.7h-8.2L775.6,376.3z"
          />
          <path
            d="M791.3,376.3v-11.3l2.8-2.8h8.6l2.8,2.8v11.3l-2.8,2.8H794L791.3,376.3z M801,376.3l1.2-1.2v-8.8l-1.2-1.2h-5.2l-1.2,1.2
       v8.8l1.2,1.2H801z"
          />
          <path
            d="M808.3,362.3h2.9l7.5,11.4h0v-11.4h3.1v16.8H819l-7.5-11.4h0v11.4h-3.1V362.3z"
          />
          <path
            d="M824.7,376.5v-2.4h3.2v1.4l0.8,0.8h5l0.8-0.8v-2.8l-0.8-0.8h-6.4l-2.6-2.6v-4.4l2.6-2.6h7.6l2.6,2.6v2.4h-3.2v-1.4
       l-0.8-0.8h-4.8l-0.8,0.8v2.5l0.8,0.8h6.4l2.6,2.6v4.7l-2.6,2.6h-7.8L824.7,376.5z"
          />
          <path
            d="M840.3,376.2v-13.9h3.3v12.8l1.2,1.2h4.7l1.2-1.2v-12.8h3.3v13.9l-2.9,2.9h-7.9L840.3,376.2z"
          />
          <path
            d="M857.1,362.3h3l5,10.8h0l5-10.8h3v16.8h-3.1v-10.2h0l-3.9,7.9h-2l-3.8-7.9h0v10.2h-3.1V362.3z"
          />
          <path
            d="M876.4,362.3h12.1v2.8h-8.9v4.2h8.2v2.7h-8.2v4.3h8.9v2.8h-12.1V362.3z"
          />
          <path
            d="M904.1,373.5v5.6h-3.3v-4.8l-1.4-1.6h-5.2v6.4h-3.3v-16.8h10.5l2.6,2.6v5.1l-1.6,1.7L904.1,373.5z M894.2,370h5.8l0.8-0.8
       v-3.3L900,365h-5.8V370z"
          />
        </g>
        <g>
          <path
            d="M272.8,362.3h10.5l2.4,2.4v4.7l-1,1l1.7,1.7v4.4l-2.6,2.6h-11.1V362.3z M281.7,369.3l0.9-0.9v-2.6l-0.8-0.8H276v4.3H281.7z
        M282.2,376.4l1-1V373l-1-1H276v4.4H282.2z"
          />
          <path d="M288.9,362.3h3.3v14h8.4v2.8h-11.7V362.3z" />
          <path
            d="M307,362.3h3l6.1,16.8h-3.3l-1.4-3.7h-5.9l-1.4,3.7h-3.3L307,362.3z M310.8,372.7l-2.2-6.4h0l-2.2,6.4H310.8z"
          />
          <path
            d="M317.1,376.5l8.6-11.4v0h-8.4v-2.7h12.3v2.6l-8.6,11.4v0h8.6v2.7h-12.5V376.5z"
          />
          <path d="M332.2,362.3h3.3v16.8h-3.3V362.3z" />
          <path
            d="M338.7,362.3h2.9l7.5,11.4h0v-11.4h3.1v16.8h-2.9l-7.5-11.4h0v11.4h-3.1V362.3z"
          />
          <path
            d="M355.2,376.3v-11.3l2.8-2.8h8.4l2.7,2.7v2.6h-3.3v-1.4l-1.1-1.1h-4.9l-1.2,1.2v8.8l1.2,1.2h5l1.2-1.2v-2.6h-3.6v-2.8h6.8
       v6.6l-2.8,2.8h-8.3L355.2,376.3z"
          />
          <path
            d="M372,362.3h2l5.4,13h0l5.4-13h2v16.8h-1.7v-13.3h0l-4.9,11.6h-1.4l-4.9-11.6h0v13.3H372V362.3z"
          />
          <path
            d="M403.8,380.6l-1.1,1.1l-2.5-2.6H393l-2.6-2.6v-11.5l2.6-2.6h7.6l2.6,2.6v11.5l-1.8,1.8L403.8,380.6z M401.4,375.9v-10.3
       l-1.6-1.6h-6l-1.6,1.6v10.3l1.6,1.6h6L401.4,375.9z"
          />
          <path
            d="M412.8,376.3v-11.3l2.8-2.8h8.2l2.7,2.7v2.6h-3.3v-1.4l-1.1-1.1h-4.8l-1.2,1.2v8.8l1.2,1.2h4.8l1.1-1.1v-1.4h3.3v2.6
       l-2.7,2.7h-8.2L412.8,376.3z"
          />
          <path d="M428.8,362.3h3.3v14h8.4v2.8h-11.7V362.3z" />
          <path
            d="M441.9,376.2v-13.9h3.3v12.8l1.2,1.2h4.7l1.2-1.2v-12.8h3.3v13.9l-2.9,2.9h-7.9L441.9,376.2z"
          />
          <path
            d="M458.3,376.5v-2.4h3.2v1.4l0.8,0.8h5l0.8-0.8v-2.8l-0.8-0.8h-6.4l-2.6-2.6v-4.4l2.6-2.6h7.6l2.6,2.6v2.4h-3.2v-1.4
       l-0.8-0.8h-4.8l-0.8,0.8v2.5l0.8,0.8h6.4l2.6,2.6v4.7l-2.6,2.6h-7.8L458.3,376.5z"
          />
          <path d="M477.2,365.1h-5v-2.8h13.3v2.8h-5v14h-3.3V365.1z" />
          <path
            d="M487.4,362.3h12.1v2.8h-8.9v4.2h8.2v2.7h-8.2v4.3h8.9v2.8h-12.1V362.3z"
          />
          <path
            d="M515.1,373.5v5.6h-3.3v-4.8l-1.4-1.6h-5.2v6.4h-3.3v-16.8h10.5l2.6,2.6v5.1l-1.6,1.7L515.1,373.5z M505.2,370h5.8l0.8-0.8
       v-3.3l-0.8-0.8h-5.8V370z"
          />
        </g>
        <g>
          <path
            d="M-0.2,362.3h10.5l2.6,2.6v5.9l-2.6,2.6H3.1v5.7h-3.3V362.3z M8.8,370.6l0.8-0.8v-3.9L8.8,365H3.1v5.6H8.8z"
          />
          <path
            d="M28.5,373.5v5.6h-3.3v-4.8l-1.4-1.6h-5.2v6.4h-3.3v-16.8h10.5l2.6,2.6v5.1l-1.6,1.7L28.5,373.5z M18.6,370h5.8l0.8-0.8
       v-3.3l-0.8-0.8h-5.8V370z"
          />
          <path
            d="M31.3,376.3v-11.3l2.8-2.8h8.6l2.8,2.8v11.3l-2.8,2.8H34L31.3,376.3z M40.9,376.3l1.2-1.2v-8.8l-1.2-1.2h-5.2l-1.2,1.2v8.8
       l1.2,1.2H40.9z"
          />
          <path
            d="M48.3,362.3h10.8l2.9,2.9v11l-2.9,2.9H48.3V362.3z M57.4,376.3l1.2-1.2v-8.8l-1.2-1.2h-5.9v11.2H57.4z"
          />
          <path
            d="M64.8,376.2v-13.9h3.3v12.8l1.2,1.2H74l1.2-1.2v-12.8h3.3v13.9l-2.9,2.9h-7.9L64.8,376.2z"
          />
          <path
            d="M81.4,376.3v-11.3l2.8-2.8h8.2l2.7,2.7v2.6h-3.3v-1.4l-1.1-1.1h-4.8l-1.2,1.2v8.8l1.2,1.2h4.8l1.1-1.1v-1.4h3.3v2.6
       l-2.7,2.7h-8.2L81.4,376.3z"
          />
          <path
            d="M97.3,362.3h12.1v2.8h-8.9v4.2h8.2v2.7h-8.2v4.3h8.9v2.8H97.3V362.3z"
          />
          <path
            d="M125.1,373.5v5.6h-3.3v-4.8l-1.4-1.6h-5.2v6.4h-3.3v-16.8h10.5l2.6,2.6v5.1l-1.6,1.7L125.1,373.5z M115.1,370h5.8l0.8-0.8
       v-3.3l-0.8-0.8h-5.8V370z"
          />
        </g>
        <g id="static-group-3-line">
          <line class="st0" x1="774.7" y1="349" x2="1000" y2="349" />
        </g>
        <g id="static-group-2-line">
          <line class="st0" x1="271" y1="349" x2="748.7" y2="349" />
        </g>
        <g id="static-group-1-line">
          <line class="st0" x1="0" y1="349" x2="246.1" y2="349" />
        </g>
        <g>
          <path
            d="M860.7,209.6h1.9l5,14h-2l-1.2-3.6h-5.5l-1.2,3.6h-2L860.7,209.6z M864,218.5l-2.3-6.5h0l-2.2,6.5H864z"
          />
          <path
            d="M869.5,209.6h8.3l1.9,1.9v4.6l-2,2h-6.3v5.5h-1.9V209.6z M876.9,216.5l0.9-0.9v-3.5l-0.9-0.9h-5.5v5.3H876.9z"
          />
          <path
            d="M882.1,209.6h8.3l1.9,1.9v4.6l-2,2H884v5.5h-1.9V209.6z M889.5,216.5l0.9-0.9v-3.5l-0.9-0.9H884v5.3H889.5z"
          />
        </g>
        <g>
          <path
            d="M469.8,313.2v4.4h-1.9v-3.9l-1.7-1.8h-4.8v5.7h-1.9v-14h8.3l1.9,1.9v4.4l-1.5,1.5L469.8,313.2z M461.4,310.3h5.5l0.9-0.9
       v-3.3l-0.9-0.9h-5.5V310.3z"
          />
          <path
            d="M472.6,303.6h9.4v1.7h-7.5v4.5h6.9v1.7h-6.9v4.5h7.5v1.7h-9.4V303.6z"
          />
          <path
            d="M484.4,303.6h8.3l1.9,1.9v4.6l-2,2h-6.3v5.5h-1.9V303.6z M491.8,310.5l0.9-0.9v-3.5l-0.9-0.9h-5.5v5.3H491.8z"
          />
          <path d="M497,303.6h1.9V316h7.1v1.7h-9V303.6z" />
          <path d="M508,303.6h1.9v14H508V303.6z" />
          <path
            d="M512.9,315.4v-9.5l2.2-2.2h6.3l2.2,2.2v1.6h-1.9v-0.9l-1.2-1.2H516l-1.2,1.2v8.2l1.2,1.2h4.4l1.2-1.2v-0.9h1.9v1.6
       l-2.2,2.2h-6.3L512.9,315.4z"
          />
          <path
            d="M529.6,303.6h1.9l5,14h-2l-1.2-3.6h-5.5l-1.2,3.6h-2L529.6,303.6z M532.8,312.5l-2.3-6.5h0l-2.2,6.5H532.8z"
          />
        </g>
        <g>
          <path
            d="M643.8,219.2v4.4h-1.9v-3.9l-1.7-1.8h-4.8v5.7h-1.9v-14h8.3l1.9,1.9v4.4l-1.5,1.5L643.8,219.2z M635.4,216.3h5.5l0.9-0.9
       v-3.3l-0.9-0.9h-5.5V216.3z"
          />
          <path
            d="M646.6,209.6h9.4v1.7h-7.5v4.5h6.9v1.7h-6.9v4.5h7.5v1.7h-9.4V209.6z"
          />
          <path
            d="M658.4,209.6h8.3l1.9,1.9v4.6l-2,2h-6.3v5.5h-1.9V209.6z M665.8,216.5l0.9-0.9v-3.5l-0.9-0.9h-5.5v5.3H665.8z"
          />
          <path d="M671,209.6h1.9V222h7.1v1.7h-9V209.6z" />
          <path d="M682,209.6h1.9v14H682V209.6z" />
          <path
            d="M686.9,221.4v-9.5l2.2-2.2h6.3l2.2,2.2v1.6h-1.9v-0.9l-1.2-1.2H690l-1.2,1.2v8.2l1.2,1.2h4.4l1.2-1.2v-0.9h1.9v1.6
       l-2.2,2.2h-6.3L686.9,221.4z"
          />
          <path
            d="M703.6,209.6h1.9l5,14h-2l-1.2-3.6h-5.5l-1.2,3.6h-2L703.6,209.6z M706.8,218.5l-2.3-6.5h0l-2.2,6.5H706.8z"
          />
        </g>
        <g>
          <path
            d="M471.8,11.2v4.4h-1.9v-3.9l-1.7-1.8h-4.8v5.7h-1.9v-14h8.3l1.9,1.9v4.4l-1.5,1.5L471.8,11.2z M463.4,8.3h5.5l0.9-0.9V4.2
       l-0.9-0.9h-5.5V8.3z"
          />
          <path
            d="M474.6,1.6h9.4v1.7h-7.5v4.5h6.9v1.7h-6.9V14h7.5v1.7h-9.4V1.6z"
          />
          <path
            d="M486.4,1.6h8.3l1.9,1.9v4.6l-2,2h-6.3v5.5h-1.9V1.6z M493.8,8.5l0.9-0.9V4.2l-0.9-0.9h-5.5v5.3H493.8z"
          />
          <path d="M499,1.6h1.9V14h7.1v1.7h-9V1.6z" />
          <path d="M510,1.6h1.9v14H510V1.6z" />
          <path
            d="M514.9,13.4V3.9l2.2-2.2h6.3l2.2,2.2v1.6h-1.9V4.5l-1.2-1.2H518l-1.2,1.2v8.2L518,14h4.4l1.2-1.2v-0.9h1.9v1.6l-2.2,2.2
       h-6.3L514.9,13.4z"
          />
          <path
            d="M531.6,1.6h1.9l5,14h-2l-1.2-3.6h-5.5l-1.2,3.6h-2L531.6,1.6z M534.8,10.5l-2.3-6.5h0l-2.2,6.5H534.8z"
          />
        </g>
        <g>
          <path
            d="M282.8,209.6h8.3l1.9,1.9v4.6l-2,2h-6.3v5.5h-1.9V209.6z M290.2,216.5l0.9-0.9v-3.5l-0.9-0.9h-5.5v5.3H290.2z"
          />
          <path
            d="M305.7,219.2v4.4h-1.9v-3.9l-1.7-1.8h-4.8v5.7h-1.9v-14h8.3l1.9,1.9v4.4l-1.5,1.5L305.7,219.2z M297.3,216.3h5.5l0.9-0.9
       v-3.3l-0.9-0.9h-5.5V216.3z"
          />
          <path d="M308.7,209.6h1.9v14h-1.9V209.6z" />
          <path
            d="M313.7,209.6h1.9l4.4,10.2h0l4.4-10.2h1.9v14h-1.8v-10.2h0l-3.8,8.6h-1.4l-3.8-8.6h0v10.2h-1.8V209.6z"
          />
          <path
            d="M333.2,209.6h1.9l5,14h-2l-1.2-3.6h-5.5l-1.2,3.6h-2L333.2,209.6z M336.5,218.5l-2.3-6.5h0l-2.2,6.5H336.5z"
          />
          <path
            d="M352.3,219.2v4.4h-1.9v-3.9l-1.7-1.8h-4.8v5.7H342v-14h8.3l1.9,1.9v4.4l-1.5,1.5L352.3,219.2z M343.9,216.3h5.5l0.9-0.9
       v-3.3l-0.9-0.9h-5.5V216.3z"
          />
          <path
            d="M358.4,217.8l-4.9-8.2h2.1l3.8,6.4h0l3.8-6.4h2.1l-4.9,8.2v5.8h-1.9V217.8z"
          />
        </g>
        <g>
          <path
            d="M108.7,209.6h1.9l5,14h-2l-1.2-3.6h-5.5l-1.2,3.6h-2L108.7,209.6z M112,218.5l-2.3-6.5h0l-2.2,6.5H112z"
          />
          <path
            d="M117.5,209.6h8.3l1.9,1.9v4.6l-2,2h-6.3v5.5h-1.9V209.6z M124.9,216.5l0.9-0.9v-3.5l-0.9-0.9h-5.5v5.3H124.9z"
          />
          <path
            d="M130.1,209.6h8.3l1.9,1.9v4.6l-2,2H132v5.5h-1.9V209.6z M137.5,216.5l0.9-0.9v-3.5l-0.9-0.9H132v5.3H137.5z"
          />
        </g>
        <line
          id="link-replica-2-consumer"
          class="st1"
          x1="669"
          y1="165"
          x2="874"
          y2="165"
        />
        <line
          id="link-replica-2-to-3"
          class="st2"
          x1="499"
          y1="259"
          x2="669"
          y2="167"
        />
        <line
          id="link-replica-1-to-2"
          class="st2"
          x1="499"
          y1="61"
          x2="669"
          y2="167"
        />
        <line
          id="link-replica-1-to-3"
          class="st2"
          x1="499"
          y1="61"
          x2="499"
          y2="259"
        />
        <line
          id="link-primary-replica-3"
          class="st2"
          x1="499"
          y1="259"
          x2="323"
          y2="165"
        />
        <line
          id="link-primary-replica-2"
          class="st2"
          x1="323"
          y1="165"
          x2="669"
          y2="165"
        />
        <line
          id="link-primary-replica-1"
          class="st2"
          x1="499"
          y1="61"
          x2="323"
          y2="165"
        />
        <g id="link-producer-primary">
          <line class="st1" x1="123" y1="165" x2="323" y2="165" />
        </g>
        <g id="icon-consumer">
          <rect x="853" y="144" class="st3" width="42" height="42" />
          <path
            class="st4"
            d="M892,147v36h-36v-36H892 M898,141h-48v48h48V141L898,141z"
          />
          <path d="M896,143v44h-44v-44H896 M898,141h-48v48h48V141L898,141z" />
        </g>
        <g id="icon-replica-3">
          <circle class="st5" cx="672" cy="164" r="31" />
          <path
            class="st4"
            d="M672,136c15.4,0,28,12.6,28,28s-12.6,28-28,28s-28-12.6-28-28S656.6,136,672,136 M672,130
       c-18.8,0-34,15.2-34,34s15.2,34,34,34s34-15.2,34-34S690.8,130,672,130L672,130z"
          />
          <path
            d="M672,132c17.6,0,32,14.4,32,32s-14.4,32-32,32s-32-14.4-32-32S654.4,132,672,132 M672,130c-18.8,0-34,15.2-34,34
       s15.2,34,34,34s34-15.2,34-34S690.8,130,672,130L672,130z"
          />
        </g>
        <g id="icon-replica-2">
          <circle class="st5" cx="498" cy="258" r="31" />
          <path
            class="st4"
            d="M498,230c15.4,0,28,12.6,28,28s-12.6,28-28,28c-15.4,0-28-12.6-28-28S482.6,230,498,230 M498,224
       c-18.8,0-34,15.2-34,34s15.2,34,34,34c18.8,0,34-15.2,34-34S516.8,224,498,224L498,224z"
          />
          <path
            d="M498,226c17.6,0,32,14.4,32,32s-14.4,32-32,32c-17.6,0-32-14.4-32-32S480.4,226,498,226 M498,224c-18.8,0-34,15.2-34,34
       s15.2,34,34,34c18.8,0,34-15.2,34-34S516.8,224,498,224L498,224z"
          />
        </g>
        <g id="icon-replica-1">
          <circle class="st5" cx="500" cy="62" r="31" />
          <path
            class="st4"
            d="M500,34c15.4,0,28,12.6,28,28s-12.6,28-28,28c-15.4,0-28-12.6-28-28S484.6,34,500,34 M500,28
       c-18.8,0-34,15.2-34,34s15.2,34,34,34c18.8,0,34-15.2,34-34S518.8,28,500,28L500,28z"
          />
          <path
            d="M500,30c17.6,0,32,14.4,32,32s-14.4,32-32,32c-17.6,0-32-14.4-32-32S482.4,30,500,30 M500,28c-18.8,0-34,15.2-34,34
       s15.2,34,34,34c18.8,0,34-15.2,34-34S518.8,28,500,28L500,28z"
          />
        </g>
        <g id="icon-primary">
          <circle class="st6" cx="324" cy="164" r="31" />
          <path
            class="st4"
            d="M324,136c15.4,0,28,12.6,28,28s-12.6,28-28,28s-28-12.6-28-28S308.6,136,324,136 M324,130
       c-18.8,0-34,15.2-34,34s15.2,34,34,34s34-15.2,34-34S342.8,130,324,130L324,130z"
          />
          <path
            d="M324,132c17.6,0,32,14.4,32,32s-14.4,32-32,32s-32-14.4-32-32S306.4,132,324,132 M324,130c-18.8,0-34,15.2-34,34
       s15.2,34,34,34s34-15.2,34-34S342.8,130,324,130L324,130z"
          />
        </g>
        <g id="icon-producer">
          <rect x="101" y="143" class="st7" width="42" height="42" />
          <path
            class="st4"
            d="M140,146v36h-36v-36H140 M146,140H98v48h48V140L146,140z"
          />
          <path d="M144,142v44h-44v-44H144 M146,140H98v48h48V140L146,140z" />
        </g>
        <g id="icon-message">
          <path
            class="st8"
            d="M135,176h-26c-1.1,0-2-0.9-2-2v-20c0-1.1,0.9-2,2-2h26c1.1,0,2,0.9,2,2v20C137,175.1,136.1,176,135,176z"
          />
          <polyline class="st9" points="107,154 122,166 137,154 	" />
          <line class="st9" x1="120" y1="164" x2="107" y2="173" />
          <line class="st9" x1="124" y1="164" x2="137" y2="173" />
        </g>
        <g id="icon-signal-tick">
          <circle class="st10" cx="672" cy="164" r="11" />
          <polyline
            class="st11"
            points="665.5,165.5 670.3,169.2 678.5,159.5 	"
          />
        </g>
      </svg>
    </div>

    <script src="../../../libs/anime.js"></script>
    <script src="../../utils.js"></script>
    <script src="./animation.js"></script>
  </body>

  <!-- Dark Theme -->
  <style type="text/css">
    body.dark-theme {
      fill: #fff;
    }
    body.dark-theme .st0 {
      stroke: #fff;
    }
    body.dark-theme .st1 {
      stroke: #fff;
    }
    body.dark-theme .st2 {
      stroke: #fff;
    }
    body.dark-theme .st4 {
      fill: #000;
    }
    body.dark-theme .st8 {
      fill: #000;
      stroke: #fff;
    }
    body.dark-theme .st9 {
      stroke: #fff;
    }
    body.dark-theme .st10 {
      stroke: #fff;
    }
    body.dark-theme .st11 {
      stroke: #000;
    }
  </style>
  <script>
    if (window.location.search.includes("theme=dark")) {
      document.body.classList.add("dark-theme");
    }
  </script>
</html>
